<template>
	<view class="wanl-signin">
		<view class="edgeInsetTop"> </view>
		<view class="header wanl-bg-redorange">
			<view class="user margin-left">
				<!-- <view class="cu-avatar lg round" :style="{ backgroundImage: 'url(' + $wanlshop.oss(user.avatar, 52, 52, 2, 'avatar') + ')' }"></view> -->
				<!-- <view class="margin-left-bj">
					<view class="text-xl">
						{{userInfo.user_id}} 
					</view>
					<view class="text-sm">
						<text class="margin-right">Lv{{userInfo.level}}</text> 
						<text class="margin-right-xs wlIcon-jifen2"></text> 积分：{{userInfo.score}}
					</view>
				</view> -->
			</view>
			<!-- <view class="tag text-orange text-sm" @tap="onScore">
				<text class="wlIcon-liwuhuodong" style="margin-right: 5rpx;"></text>积分记录
			</view> -->
		</view>
		<view class="content bg-white padding-tb-bj radius-bock shadow-warp">
			<view class="text-df margin-tb-xs margin-lr-bj text-bold" style="color: #5A5B5C;">
				<view v-if="signinData.signin">
					{{this.$t('signin.text1')}}
					<text>{{ signinData.successions }}</text>
					{{this.$t('signin.text2')}}
					<text>{{ signinData.score }}</text>
					{{this.$t('signin.text4')}}
				</view>
				<view v-else>
					{{this.$t('signin.text1')}}
					<text>{{ signinData.score }}</text>
					{{this.$t('signin.text4')}}
				</view>
			</view>
			<wanl-steps :active="signinData.successions" activeColor="#ffbc00" :options="stepsOption" />
			<view class="text-center">
				<view v-if="signinData.signin"><button class="cu-btn bg-gray round lg text-sm text-gray">{{this.$t('signin.qiandao1')}}</button>
				</view>
				<view v-else><button class="cu-btn wanl-bg-redorange round lg text-sm" @tap="attendance">{{this.$t('signin.qiandao')}}</button>
				</view>
			</view>
		</view>
		<view class="margin-bj radius-bock shadow-warp">
			<uni-calendar :selected="selected" :showReturn="false" @change="change" />
		</view>
		<view class="edgeInsetBottom"></view>
		<wanl-modal custom :show="attendanceModalVisible">
			<view class="attendance-modal">
				<view class="modal-header">
					<!-- <image :src="$wanlshop.appstc('/common/cup.png')" mode="widthFix"></image> -->
				</view>
				<view class="modal-content text-sm wanl-gray">
					<view>{{ signinInfo }}</view>
				</view>
				<view class="modal-btn"><button class="cu-btn wanl-bg-redorange round lg text-sm"
						@tap="attendanceModalVisible = false">{{this.$t('signin.see')}}</button></view>
			</view>
		</wanl-modal>
	</view>
</template>

<script>
	import {
		getSignin,
		dosign,
	} from '@/api/jogos.js';

	import {
		getInfo
	} from '@/api/login';

	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {
			...mapGetters(['userInfo', 'token'])
		},
		data() {
			return {
				signinData: {},
				selected: [],
				signinInfo: '',
				attendanceModalVisible: false,
				stepsOption: [{
						title: '1' + this.$t('signin.day'),
						desc: '+1'
					},
					{
						title: '2' + this.$t('signin.day'),
						desc: '+2'
					},
					{
						title: '3' + this.$t('signin.day'),
						desc: '+3'
					},
					{
						title: '4' + this.$t('signin.day'),
						desc: '+4'
					},
					{
						title: '5' + this.$t('signin.day'),
						desc: '+5'
					},
					{
						title: '6' + this.$t('signin.day'),
						desc: '+6'
					},
					{
						title: '7' + this.$t('signin.day'),
						desc: '+7'
					},
					{
						title: '7' + this.$t('signin.dayup'),
						desc: '+7',
						circle: '/static/images/integrals/goal.png',
						circleStyle: 'width: 47rpx; height: 39rpx;'
					}
				]
			};
		},
		onLoad(option) {
			this.loadData();
		},
		methods: {
			async loadData() {
				uni.showLoading();
				let self = this
				let {
					code,
					data
				} = await getSignin()
				if (code == 200) {
					uni.hideLoading();
					self.signinData = res;
					// 进程
					self.stepsOption[0].desc = '+' + res.signinscore.s1;
					self.stepsOption[1].desc = '+' + res.signinscore.s2;
					self.stepsOption[2].desc = '+' + res.signinscore.s3;
					self.stepsOption[3].desc = '+' + res.signinscore.s4;
					self.stepsOption[4].desc = '+' + res.signinscore.s5;
					self.stepsOption[5].desc = '+' + res.signinscore.s6;
					self.stepsOption[6].desc = '+' + res.signinscore.s7;
					self.stepsOption[7].desc = '+' + res.signinscore.sn;
					// 打标
					res.list.forEach(item => {
						self.selected.push({
							date: self.timestampToTime(item.createtime),
							info: self.$t('signin.yq')
						});
					});
					// self.$store.commit('user/setUserInfo', {
					// 	score: res.user_score
					// });

				}

			},
			// 点击签到
			async attendance() {
				
				uni.showLoading();
				let self = this
				let {
					code,
					data
				} = await dosign()
				if (code == 200) {
					// 101 充值后可签到
					// 102 今天已签到,请明天再来!
					// 103 签到失败!
					self.loadData();
					if(data == 101){
						self.signinInfo = self.$t('signin.czhqd')
						self.attendanceModalVisible = true;
					}else if(data == 102){
						self.signinInfo = self.$t('signin.jtyqd')
						self.attendanceModalVisible = true;
					} else if(data == 103){
						self.signinInfo = self.$t('signin.qdsb')
						self.attendanceModalVisible = true;
					}else{
						self.signinInfo = self.$t('signin.songd');
						self.attendanceModalVisible = true;
					}
					
				}
				
				
			},
			// 补签
			change(data) {
				// 正常签到
				if (this.signinData.date == data.fulldate) {
					this.attendance();
				} else {
					// 补签
					if (this.signinData.isfillup == 1) {
						uni.showModal({
							title: '确定要补签',
							content: '确认进行补签日期：' + data.fulldate + '？补签将消耗' + this.signinData.fillupscore + '积分',
							success: res => {
								if (res.confirm) {
									this.$api.get({
										url: '/wanlshop/signin/fillup',
										data: {
											date: data.fulldate
										},
										success: res => {
											this.signinInfo = '补签' + data.fulldate + '日成功，本次扣除' +
												this.signinData.fillupscore + '积分';
											this.attendanceModalVisible = true;
											this.loadData();
										}
									});
								}
							}
						});
					} else {
						this.$wanlshop.msg('系统不允许补签');
					}
				}
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate();
				return Y + M + D;
			},
			onScore() {
				this.$wanlshop.to('/pages/user/signin/log');
			}
		}
	};
</script>

<style>
	.wanl-signin {
		background: #eeeeee;
	}

	.wanl-signin .header {
		display: flex;
		height: 120rpx;
		align-items: center;
		justify-content: space-between;
	}

	.wanl-bg-redorange {
		background: #ff3d33;
		background-image: linear-gradient(90deg, #ff6333 0, #fe6600 97%);
		color: white;
	}

	.wanl-signin .header .user {
		display: flex;
		align-items: center;
	}

	.wanl-signin .header .tag {
		background-color: #fff;
		padding: 10rpx 10rpx;
		border-radius: 100rpx 0 0 100rpx;
	}

	.wanl-signin .content {
		margin: 25rpx;
		margin-top: -80rpx;
	}

	.wanl-signin .content .cu-btn {
		width: 50%;
	}

	.wanl-signin .attendance-modal .modal-header {
		width: 100%;
		height: 260rpx;
		margin-top: -180rpx;
		position: relative;
	}

	.wanl-signin .attendance-modal .modal-header image {
		width: 100%;
		height: 100%;
	}

	.wanl-signin .attendance-modal .modal-content {
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wanl-signin .attendance-modal .modal-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wanl-signin .attendance-modal .btn {
		width: 100%;
		border-radius: 50rem;
		font-size: $font-size-lg;
	}

	.wanl-signin .content[data-v-960c9bb8] {
		margin: 12px;
		margin-top: -40px;
	}

	.bg-white {
		background-color: #ffffff;
		color: #222222;
	}

	.radius-bock {
		border-radius: 9px;
		overflow: hidden;
	}

	.padding-tb-bj {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.bg-white {
		background-color: #ffffff;
		color: #333333;
	}

	.shadow-warp {
		position: relative;
		box-shadow: 0 0 5px rgba(0, 0, 0, .05);
	}

	.margin-lr-bj {
		margin-left: 12px;
		margin-right: 12px;
	}

	.text-bold {
		font-weight: bold;
	}

	.text-df {
		font-size: 14px;
	}

	.margin-tb-xs {
		margin-top: 5px;
		margin-bottom: 5px;
	}
</style>